<template>
	<view class="gyd-tabs">
		<uni-segmented-control :current="currentTab" :values="list" @clickItem="clickItem" :styleType="styleType"
			:activeColor="activeColor"></uni-segmented-control>
	</view>
</template>

<script setup>
	import {
		reactive,
		toRefs,
		defineProps,
		ref,
		watchEffect
	} from 'vue';

	defineOptions({
		name: 'gyd-tabs'
	});

	const props = defineProps({
		current: {
			type: Number,
			default: 0,
		},
		list: {
			type: Array,
			default: [],
		},
		styleType: {
			type: String,
			default: 'text',
		},
		activeColor: {
			type: String,
			default: '#007AFF',
		}
	});

	const currentTab = ref(0);
	const emits = defineEmits(['clickItem']);

	watchEffect(() => {
		currentTab.value = parseInt(props.current);
	});

	function clickItem(e) {
		currentTab.value = e.currentIndex;
		emits('clickItem', currentTab.value);
	}
</script>

<style lang="scss">
	.gyd-tabs {
		background-color: #fff;
	}
</style>